<template>
  <el-container style="height: 100vh;">
    <!-- Header -->
    <el-header>
      <h1>欢迎使用惊喜一餐！</h1>
    </el-header>

    <!-- Main content -->
    <el-main>
      <!-- 欢迎语和推荐餐厅 -->
      <el-row>
        <el-col :span="12">
          <h2>推荐餐厅</h2>
          <el-carousel interval="4000" arrow="always">
            <el-carousel-item v-for="(restaurant, index) in recommendedRestaurants" :key="index">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="restaurant.image" class="image" alt="餐厅图片">
                <div style="padding: 14px;">
                  <span>{{ restaurant.name }}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ restaurant.rating }}</time>
                  </div>
                </div>
              </el-card>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="12">
          <h2>用户信息</h2>
          <el-card>
            <div v-if="userInfo">
              <h3>{{ userInfo.name }}</h3>
              <p>收藏餐厅：{{ userInfo.favoriteRestaurants.length }}</p>
              <p>历史操作：{{ userInfo.history.length }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import { ElContainer, ElHeader, ElMain, ElRow, ElCol, ElCard, ElCarousel, ElCarouselItem } from 'element-plus';

  export default {
    components: {
      ElContainer,
      ElHeader,
      ElMain,
      ElRow,
      ElCol,
      ElCard,
      ElCarousel,
      ElCarouselItem
    },
    data() {
      return {
        recommendedRestaurants: [
          { name: '一食堂', rating: '评分：4.5', image: require('@/assets/一食堂.jpg') },
          { name: '二食堂', rating: '评分：4.8', image: require('@/assets/二食堂.jpg') },
          { name: '三食堂', rating: '评分：4.4', image: require('@/assets/三食堂.jpg') },
        ],
        userInfo: {
          name: 'lyf',
          favoriteRestaurants: [
            // ...用户收藏的餐厅列表
          ],
          history: [
            // ...用户历史操作记录
          ]
        }
      };
    }
  };
</script>

<style scoped>
  .image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
</style>